<template>
<div>
    <div style="width:100%">
      <div class="page-title" style="width:100%;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item><a @click="$router.go(-1)">问题验证</a></el-breadcrumb-item>
          <el-breadcrumb-item>问题详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 问题详情 -->
      <div 
      class="page-content" 
      style="font-size:20px;width:100%;border-top: 1px solid #dddddd;">
        <el-form 
        label-width="150px" 
        :model="problem">
          <el-row  style="padding-bottom:5px">
            <font style="font-size:15px;font-weight:bold">问题详情</font>
          </el-row> 
          <el-row style="padding-top:10px; border-top: 2px solid #dddddd">
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="检查人：" style="height:20px">{{problem.checkPerson}}</el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
              <el-form-item label="检查时间：" style="height:20px">{{problem.checkDate}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位：" style="height:20px">{{problem.parentCompanyName}}</el-form-item>
          </el-col>
          <el-col :span="12"></el-col>
            <el-form-item label="基层单位：" style="height:20px">{{problem.basicCompanyName}}</el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="班组：" style="height:20px">{{problem.companyName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查地点：" style="height:20px">{{problem.checkStation}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-form-item label="问题描述：" style="height:20px">{{problem.description}}</el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="备注：" style="height:20px">{{problem.note}}</el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
          <el-form-item label="问题类型：">{{problem.problemType}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="问题程度：">{{problem.problemRank}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="问题体系要素：">{{problem.hseFactor}}</el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="问题原因：" style="height:20px">{{problem.problemSource}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安全绩效扣分：" style="height:20px">{{problem.lostScore}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-form-item label="依据：" style="height:20px">{{problem.problemGist}}</el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
          <el-form-item label="责任人" style="height:20px">{{problem.responsePersonName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用工性质：" style="height:20px">{{problem.employmentProperty}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
             <el-form-item label="所在岗位：" style="height:20px">{{problem.workingName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位工龄：" style="height:20px">{{problem.workingAge}}</el-form-item>
          </el-col>
        </el-row>
         <el-row>
           <el-form-item label="整改责任人：" style="height:20px">{{problem.supervisorName}}</el-form-item>
        </el-row> 
        <el-row>
          <el-col :span="12">
            <el-form-item label="检查图片1： ">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="right" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.checkAttach1" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.checkAttach1" :alt="problem.checkAttach1" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查图片2：">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="center" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.checkAttach2" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.checkAttach2" :alt="problem.checkAttach2" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="检查图片3：">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="right" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.checkAttach3" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.checkAttach3" :alt="problem.checkAttach3" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查图片4：">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="right" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.checkAttach4" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.checkAttach4" :alt="problem.checkAttach4" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
             <el-form-item label="检查视频：">
              <el-card 
              v-model="problem.checkVideo"
              :show-file-list="false"
              accept='.mp4,.qlv,.qsv,.ogg,.flv,.avi,.wmv,.rmvb'
              :headers="{Authorization:currentUser.token}"
              style="height:251px;width:90%"
              >
              <video v-if="problem.checkVideo !='' && videoFlag1 == false"
                               :src="problem.checkVideo"
                               class="avatar video-avatar"
                               controls="controls">您的浏览器不支持视频播放</video> 
                        <i v-if="problem.checkVideo =='' && videoFlag1 == false"></i>
                    </el-card>
               </el-form-item>
          </el-col>
          </el-row>
      <!-- 整改 -->
      <el-row style="padding-bottom:5px">
          <font style="font-size:15px;font-weight:bold">问题整改</font>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否评判教育：" style="height:20px">{{problem.education}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="整改图片1： ">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="right" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.rectAttach1" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.rectAttach1" :alt="problem.rectAttach1" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="整改图片2：">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="center" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.rectAttach2" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.rectAttach2" :alt="problem.rectAttach2" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="整改图片3：">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="right" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.rectAttach3" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.rectAttach3" :alt="problem.rectAttach3" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="整改图片4：">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="right" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.rectAttach4" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.rectAttach4" :alt="problem.rectAttach4" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
             <el-form-item label="整改视频：">
              <el-card 
              v-model="problem.rectVideo"
              :show-file-list="false"
              accept='.mp4,.qlv,.qsv,.ogg,.flv,.avi,.wmv,.rmvb'
              :headers="{Authorization:currentUser.token}"
              style="height:251px;width:90%"
              >
              <video v-if="problem.rectVideo !='' && videoFlag1 == false"
                               :src="problem.rectVideo"
                               class="avatar video-avatar"
                               controls="controls">您的浏览器不支持视频播放</video> 
                        <i v-if="problem.rectVideo =='' && videoFlag1 == false"></i>
                    </el-card>
               </el-form-item>
          </el-col>
          </el-row>
          <el-row>
            <el-form-item label="整改描述： ">{{problem.rectDescription}}</el-form-item>
          </el-row>
      <!-- 问题验证 -->
        <el-row style="padding-bottom:5px">
          <font style="font-size:15px;font-weight:bold">问题验证</font>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="验证人">{{problem.verifyPersonName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="验证时间">{{problem.verifyDate}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="整改效果">{{problem.rectEffect}}</el-form-item>
        </el-row>
        <el-row class="buttons">
          <el-form-item>
            <el-button type="danger" style="width:100px" @click="$router.go(-1)">返回</el-button>   
          </el-form-item>
        </el-row>
      </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {GetCQCheckRecordID} from '../../../services/cq_problem_acceptance'
import {GetCurrentUser } from '../../../store/CurrentUser'
import Vue from 'vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

export default {
  data() {
    return {
      client:VueCookies.get("client"),
      problem:{},
    };
  },
  mounted () {
    this.getCQCheckRrcordDetail()
  },
  computed:{
    currentUser(){
      return GetCurrentUser()
    }
  },
  methods: {
     //根据problemID获取单个问题详细信息
    getCQCheckRrcordDetail () {
      this.$route.params.id && localStorage.setItem('data',JSON.stringify(this.$route.params.id));
      const id = JSON.parse(localStorage.getItem('data'));
      GetCQCheckRecordID(id).then((res) => {
        this.problem = res.data
        console.log('problem',res)
      }).catch((err) => {
        this.$message.error(err.message)
      })
    }
  }
};
</script>

<style>
#main{
  /* position: relative; */
  width:1000px;
  height: 100%;
  margin-left: 2%;
  margin-right: 5%;
}
.above{
margin-top: 20px;
width: 1000px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 30px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: buttom;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.video-avatar {
  width: 400px;
  height: 200px;
}
</style>
